<template>
  <div id="app">
  	<index @m=indexm :p=indexp class="index"></index>
  	<popera @m=poperam :p=poperap></popera>
  	<buttona @m=buttonam :p=buttonap></buttona>
  </div>
</template>

<script>
	import buttona from '@cpts/vue/button/buttona.vue'
	import poper from '@cpts/vue/vue-poper'
	import vuebox from '@cpts/vue/vue-3dbox'
	import firstpage from '@/pages/firstPage.vue'
	import secondpage from '@/pages/secondPage.vue'
	import thirdpage from '@/pages/thirdPage.vue'
	import fourthpage from '@/pages/fourthPage.vue'
	import load from '@/pages/load.vue'
	var index=vuebox('a',[firstpage,secondpage,thirdpage,fourthpage,load])
	var popera=poper('a');
export default {
  name: 'app',
  components:{popera,buttona,index},
  data(){
  	return {
  		transitionName: 'slide-left',
  		buttonap:{//按钮组件传递的值
				content:'立即体验',
				show:!0,
				showArrow:!0
  		},
  		poperap:{//弹出层组件传递的值
  			content:'请选择您要下载的类型',
  			buttons:['安卓','取消','ios'],
  			show:!1
  		},
  		indexp:{//路由组件传递的值
  			roty:0,
  			rotx:0,
  			canmove:!0,
  			opage:0
  		}
  	}
  },
  computed:{
  	opage(){
  		return this.indexp.opage;
  	}
  },
  watch:{
  	opage(newv){
  		if(newv==3){
  			this.buttonap.showArrow=!1;
  		}else{
  			this.buttonap.showArrow=!0;
  		}
  	}
  },
  methods:{
  	poperam(index){//popera组件的方法
  		switch(index){
  			case 0:
  			  console.log('安卓下载')
  				break;
  			case 1:
  				this.poperap.show=!1;
  				break;
  			case 2:
  				console.log('苹果下载')
  				break;
  		}
  	},
  	buttonam(index){//按钮组件方法
  		if(index==0){//点击button按钮
  			if(this.indexp.roty==0){
  				this.indexp.roty=1;
					this.indexp.canmove=!1;
					this.buttonap.content='立即下载'
					this.buttonap.showArrow=!1;
  			}else{
  				this.poperap.show=!0;
  			}
  		}else if(index==1){//点击向下箭头
  			this.indexp.rotx+=1;
  		}
  	},
  	indexm(index){//路由组件方法
  		if(index==10){
  			this.indexp.roty=0;
  			this.indexp.canmove=!0;
  			this.buttonap.content='立即体验';
  			this.buttonap.showArrow=!0;
  		}
  	}
  },
  mounted(){
  	window.yu=this;
		var startPos = 0,endPos = 0,isScrolling = 0;
    document.addEventListener('touchstart',function(event){
        var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
        startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值
        isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
    }, false);

    //解绑事件 web前端开发
    document.addEventListener('touchend',function(event){
        document.removeEventListener('touchmove',this,false);
        document.removeEventListener('touchend',this,false);
    }, false);

    document.addEventListener('touchmove',function(event){
        //当屏幕有多个touch或者页面被缩放过，就不执行move操作
        if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
        var touch = event.targetTouches[0];
        endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
        isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时，表示纵向滑动，0为横向滑动
        if(isScrolling === 1){
            event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
        }
    }, false);
  }
}
</script>

<style lang="less">
	body{
		background:#ddd;
		>#app {
		  font-family: 'Avenir', Helvetica, Arial, sans-serif;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		  text-align: center;
		  color: #2c3e50;
		  background:#888;
		  >.index {  
			  position: absolute;  
			  left: 0;  
			  top: 0;  
			  width: 100%;  
			  height: 100%;  
			  transition: all .5s cubic-bezier(.55,0,.1,1);  
			  >.container{
			  	>div{
			  		box-sizing: border-box;
			  		padding-top:30px;
			  		.title{
				  		height:20%;
				  	}
				  	.container{
				  		position: relative;
				  		height:60%;
				  	}
			  	}
			  	>.first{
			  		.title{
			  			height:25%;
			  		}
			  		.container{
			  			.iphonepc{
			  				padding-top:20px;
			  			}
			  			.carousalbox{
			  				margin-top:10px;
			  				position:relative;
			  			}
			  		}
			  	}
			  }
			} 
		}
	}
</style>
